﻿@using CleanArchitecture.Core.Helper
@using CleanArchitecture.Infrastructure.Entities.Settings
@using CleanArchitecture.Infrastructure.Interfaces
@using CleanArchitecture.Infrastructure.Interfaces.Business
@using CleanArchitecture.Infrastructure.Models.SystemManage
@using CleanArchitecture.Infrastructure.Services
@inject IWorkContext workContext
@inject IDbContext dbContext
@inject INewsService newsService
@inject IActiveLogService activelogService
@{
    Layout = "_BackendLayout";
    ViewData["Title"] = ViewBag.PageTitle as string;
    SystemNoticeSearchModel noticesearchModel = ViewBag.NoticeSearchModel as SystemNoticeSearchModel ?? null;

    int newsCount = newsService.StatisticsNewsCount();
    var sevendayCount = activelogService.StatisticsBlogVistCountWithin7Days();

    //客户端设置
    var ClientPCSettings = ViewBag.ClientPCSettings as ClientSitePCSettings ?? null;
    var ClientMobileSettings = ViewBag.ClientMobileSettings as ClientSiteMobileSettings ?? null;
}
@section cssstyles {
    <style type="text/css">
    .layui-card {
        border: 1px solid #f2f2f2;
        border-radius: 5px;
    }

    .icon {
        margin-right: 10px;
        color: #1aa094;
    }

    .icon-cray {
        color: #ffb800 !important;
    }

    .icon-blue {
        color: #1e9fff !important;
    }

    .icon-tip {
        color: #ff5722 !important;
    }

    .layuimini-qiuck-module {
        text-align: center;
        margin-top: 10px
    }

    .layuimini-qiuck-module a i {
        display: inline-block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-radius: 2px;
        font-size: 30px;
        background-color: #F8F8F8;
        color: #333;
        transition: all .3s;
        -webkit-transition: all .3s;
    }

    .layuimini-qiuck-module a cite {
        position: relative;
        top: 2px;
        display: block;
        color: #666;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
    }

    .welcome-module {
        width: 100%;
    }

    .panel {
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
        box-shadow: 0 1px 1px rgba(0,0,0,.05)
    }

    .panel-body {
        padding: 10px
    }

    .panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 12px;
        color: inherit
    }

    .label {
        display: inline;
        padding: .2em .6em .3em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
        margin-top: .3em;
    }

    .layui-red {
        color: red
    }

    .main_btn > p {
        height: 40px;
    }

    .layui-bg-number {
        background-color: #F8F8F8;
    }

    .layuimini-notice:hover {
        background: #f6f6f6;
    }

    .layuimini-notice {
        padding: 7px 16px;
        clear: both;
        font-size: 12px !important;
        cursor: pointer;
        position: relative;
        transition: background 0.2s ease-in-out;
    }

    .layuimini-notice-title, .layuimini-notice-label {
        padding-right: 70px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .layuimini-notice-title {
        line-height: 28px;
        font-size: 14px;
    }

    .layuimini-notice-extra {
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 16px;
        display: inline-block;
        height: 16px;
        color: #999;
    }
    .layadmin-shortcut li .layui-icon {
        display: inline-block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-radius: 2px;
        font-size: 30px;
        background-color: #F8F8F8;
        color: #333;
        transition: all .3s;
        -webkit-transition: all .3s;
    }
    .layadmin-shortcut li {
        text-align: center;
    }
    [lay-href], [data-iframe-tab] {
        cursor: pointer;
    }
    .layadmin-shortcut li cite {
        position: relative;
        top: 2px;
        display: block;
        color: #666;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
    }
    </style>
}
<div id="homeapp" class="layui-row layui-col-space15">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-fire icon"></i>版本信息</div>
                    <div class="layui-card-body layui-text">
                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>框架技术</td>
                                    <td>
                                        <p>系统名称：Nowablog</p>
                                        <p>Version: @GetType().Assembly.GetName().Version.ToString()</p>
                                        <p>NET框架版本：@Environment.Version.ToString()</p>
                                        <p>数据库版本： @dbContext.ServerVersion()</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>技术支持</td>
                                    <td>DavidLee / 19725354(微信、QQ同号)</td>
                                </tr>
                                <tr>
                                    <td>开源地址</td>
                                    <td>
                                        <a href='https://gitee.com/konkoncar/nowablog' target="_blank" title="Fork me on Gitee"><img src='https://gitee.com/konkoncar/nowablog/badge/star.svg?theme=white' alt='star'/></a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>网站首页</td>
                                    <td>
                                        @if(!ClientPCSettings.ShutdownWebsite && !string.IsNullOrEmpty(ClientPCSettings.WebsiteHostUrl))
                                        {
                                        <a href="@ClientPCSettings.WebsiteHostUrl" target="_blank">电脑客户端</a>
                                        }
                                        @if(!ClientMobileSettings.ShutdownWebsite && !string.IsNullOrEmpty(ClientMobileSettings.WebsiteHostUrl))
                                        {
                                        @Html.Raw("/") <a href="@ClientMobileSettings.WebsiteHostUrl" target="_blank">手机客户端</a>
                                        }
                                         
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-bolt icon" aria-hidden="true"></i>快捷方式</div>
                    <div class="layui-card-body">
                        <div class="layui-carousel layadmin-shortcut" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 230px;">
                            <div carousel-item="">
                                <ul class="layui-row layui-col-space10 layui-this">
                                    <li class="layui-col-xs3">
                                        <a href="javascript:;" data-iframe-tab="/account/setting" data-title="基本资料" data-icon="fa fa-gears">
                                            <i class="layui-icon layui-icon-user"></i>
                                            <cite>个人资料</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a href="javascript:;" data-iframe-tab="/system/websitemanage" data-title="站点管理" data-icon="layui-icon layui-icon-website">
                                            <i class="layui-icon layui-icon-website"></i>
                                            <cite>站点管理</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a href="javascript:;" data-iframe-tab="/business/blogmanage" data-title="博客管理" data-icon="fa fa-cubes">
                                            <i class="layui-icon layui-icon-read"></i>
                                            <cite>博客管理</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a href="javascript:;" data-iframe-tab="/business/newsmanage" data-title="文章管理" data-icon="fa fa-newspaper-o">
                                            <i class="layui-icon layui-icon-list"></i>
                                            <cite>文章管理</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a href="javascript:;" data-iframe-tab="/business/columnmanage" data-title="栏目菜单管理" data-icon="fa fa-columns">
                                            <i class="layui-icon layui-icon-template"></i>
                                            <cite>栏目菜单管理</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a href="javascript:;" data-iframe-tab="/business/resourcemanage" data-title="资源管理" data-icon="fa fa-file-movie-o">
                                            <i class="layui-icon layui-icon-video"></i>
                                            <cite>资源管理</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a href="javascript:;" data-iframe-tab="/business/commentmanage" data-title="留言管理" data-icon="fa fa-commenting">
                                            <i class="layui-icon layui-icon-dialogue"></i>
                                            <cite>留言管理</cite>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs3">
                                        <a href="javascript:;" data-iframe-tab="/business/advertisemanage" data-title="广告管理" data-icon="fa fa-share-alt-square">
                                            <i class="layui-icon layui-icon-share"></i>
                                            <cite>广告管理</cite>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-header">
                    <i class="fa fa-line-chart icon"></i>报表统计-近七天文章浏览量
                    <span class="label pull-right layui-bg-blue">实时</span>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15" id="echart_blogsvisit" style="width: 100%; height: 350px;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="fa fa-bullhorn icon icon-tip"></i>系统公告
                <button type="button" v-if="isAdmin" id="addNewNotice" v-on:click="ItemClick('AddNewNotice', null)" class="layui-btn layui-btn-radius layui-btn-norma layui-btn-sm">
                    <i class="layui-icon">&#xe608;</i> 添加
                </button>
            </div>
            <div class="layui-card-body layui-text">
                <div class="layuimini-notice" v-for="(item,index) in systemnotices" v-bind:key="item.Id" v-on:click="ItemClick('ViewSystemNotice',item)">
                    <div class="layuimini-notice-title">{{item.Title}}</div>
                    <div class="layuimini-notice-extra">{{Formatdate(item.CreatedTime)}}</div>
                    <div class="layuimini-notice-content layui-hide" v-text="item.Text">
                    </div>
                </div>
                <div class="layui-container" id="pageContainer" style="float:left; padding: 6px;"></div>
            </div>
        </div>
        
        <div class="layui-card" style="margin-top: 50px;">
            <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
            <div class="layui-card-body">
                <div class="welcome-module">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-xs6">
                            <div class="panel layui-bg-number">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <span class="label pull-right layui-bg-blue">实时</span>
                                        <h5>用户统计</h5>
                                    </div>
                                    <div class="panel-content">
                                        <h1 class="no-margins">1234</h1>
                                        <small>当前分类总记录数</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="panel layui-bg-number">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <span class="label pull-right layui-bg-cyan">实时</span>
                                        <h5>文章统计</h5>
                                    </div>
                                    <div class="panel-content">
                                        <h1 class="no-margins">@newsCount</h1>
                                        <small>当前已发布文章数</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="panel layui-bg-number">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <span class="label pull-right layui-bg-orange">实时</span>
                                        <h5>浏览统计</h5>
                                    </div>
                                    <div class="panel-content">
                                        <h1 class="no-margins">1234</h1>
                                        <small>当前分类总记录数</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="panel layui-bg-number">
                                <div class="panel-body">
                                    <div class="panel-title">
                                        <span class="label pull-right layui-bg-green">实时</span>
                                        <h5>订单统计</h5>
                                    </div>
                                    <div class="panel-content">
                                        <h1 class="no-margins">1234</h1>
                                        <small>当前分类总记录数</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="NoticeDialog" class="layui-hide layui-fluid" style="padding: 15px;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 70px;">标题</label>
            <div class="layui-input-block" style="margin-left: 70px;">
                <input type="text" name="Title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" style="width: 70px;">内容</label>
            <div class="layui-input-block" style="margin-left: 70px;">
                <textarea id="NoticeText" name="Text" style="display: none;" lay-verify="formTextRequired"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="submitNotice">
                    <i class="layui-icon layui-icon-release"></i>发布
                </button>
            </div>
        </div>
    </form>
</div>

@section scripts{
    <script type="text/javascript" src="~/lib/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="~/lib/microsoft-signalr/signalr.min.js"></script>
    <script language="javascript" type="text/javascript">
        layui.use(['layer', 'laypage', 'iziToast', 'util', 'layedit', 'form', 'notice', 'layuimini'], function () {
            var $ = layui.jquery,
                util = layui.util,
                layer = layui.layer,
                laypage = layui.laypage,
                iziToast = layui.iziToast,
                layedit = layui.layedit,
                form = layui.form,
                notice = Util.notice !== null && Util.notice() !== null
                    ? Util.notice() : layui.notice,
                layuimini = layui.layuimini;
            var PageSize = @noticesearchModel.PageSize,
                requestData = {
                    '@noticesearchModel.nameof(m => m.Page)' : 1,
                    '@noticesearchModel.nameof(m => m.PageSize)' : PageSize
                };
            //For SignalR Hub connectionid
            var connectionId = "";
            var vm = new Vue({
                el: '#homeapp',
                data: {
                    systemnotices: [],
                    pager: null,
                    isAdmin: @(workContext.IsAdmin ? Html.Raw("true") : Html.Raw("false"))
                },
                created: function () {
                    this.ReloadSystemNotice();
                },
                methods: {
                    Formatdate: function(date) {
                        return util.toDateString(date, "yyyy-MM-dd HH:mm");
                    },
                    LoadSystemNoticeList: function (req, loading) {
                        var _this = this;
                        httpapi.fetchPost('/api/backend/loadsystemnotices', req).then(res => {
                            loading.remove();
                            if (!httpapi.checkResponse(res))
                                //输入信息校验错误
                                iziToast.error({
                                    title: '消息通知',
                                    message: res.message
                                });
                            else {
                                _this.systemnotices = res.data.Data;
                                if (_this.pager === null) {
                                    _this.pager = laypage.render({
                                        elem: 'pageContainer'
                                        , count: res.data.RecordsTotal
                                        , layout: ['count', 'prev', 'page', 'next']
                                        , theme: '#1E9FFF'
                                        , limit: @noticesearchModel.PageSize
                                        , limits: [@noticesearchModel.AvailablePageSizes]
                                        , jump: function (obj, first) {
                                            //首次不执行
                                            if (!first) {
                                                requestData.Page = obj.curr;
                                                requestData.PageSize = obj.limit;
                                                var $loading = Util.loading(false, 0);
                                                _this.LoadSystemNoticeList(requestData, $loading);
                                            }
                                        }
                                    });
                                }
                            }
                        }).catch(error => console.error(error));
                    },
                    ReloadSystemNotice: function () {
                        var _this = this;
                        requestData.Page = 1;
                        requestData.PageSize = PageSize;
                        var $loading = Util.loading(false, 0);
                        _this.LoadSystemNoticeList(requestData, $loading);
                    },
                    ItemClick: function (eventName, item) {
                        var _this = this;
                        if (eventName === 'ViewSystemNotice') {
                            var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n'
                                + '    <div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px">\n'
                                + '        <h4 class="text-danger">' + item.Title + '</h4>\n'
                                + '    </div>\n'
                                + '    <div style="font-size: 12px">' + item.Text + '</div>\n'
                                + '</div>\n';
                            layer.open({
                                type: 1,
                                title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + _this.Formatdate(item.CreatedTime) + '</span>',
                                area: '300px;',
                                shade: 0.8,
                                id: 'nowanotice',
                                btn: ['确定'],
                                btnAlign: 'c',
                                moveType: 1,
                                content: html
                            });
                            return;
                        } else if (eventName === "AddNewNotice") {
                            var layeditIndex = null,
                                editDialog = layer.open({
                                    title: "发布公告",
                                    type: 1,
                                    content: $("#NoticeDialog"),
                                    area: ['580px', '410px'],
                                    moveType: 1,
                                    success: function (layero, index) {
                                        layero.find("div#NoticeDialog").removeClass("layui-hide");
                                        layeditIndex = layedit.build('NoticeText', {
                                            height: 160 //设置编辑器高度
                                            , tool: [
                                                'strong' //加粗
                                                , 'italic' //斜体
                                                , 'underline' //下划线
                                                , 'del' //删除线
                                                , '|' //分割线
                                                , 'left' //左对齐
                                                , 'center' //居中对齐
                                                , 'right' //右对齐
                                                ,'link' //超链接
                                                , 'unlink' //清除链接
                                                , 'face' //表情
                                            ]
                                        });
                                        layedit.sync(layeditIndex);
                                    },
                                    end: function () {
                                        $("#NoticeDialog").addClass("layui-hide");
                                        $("#NoticeDialog").find("input[name=Title]").val("");
                                    }
                                });
                            form.verify({
                                formTextRequired: function (value, item) {
                                    var content = layedit.getContent(layeditIndex);
                                    if (content.length <= 0)
                                        return '请编辑通知内容';
                                }
                            });
                            //绑定表单提交
                            form.on('submit(submitNotice)', function (data) {
                                var notice = data.field;
                                if (notice.hasOwnProperty("Text"))
                                    notice.Text = layedit.getContent(layeditIndex);
                                var index = layer.load(1);
                                httpapi.fetchPost('/api/backend/addnewsystemnotice?connectionId=' + connectionId, notice).then(res => {
                                    layer.close(index);
                                    if (!httpapi.checkResponse(res))
                                        //输入信息校验错误
                                        iziToast.error({
                                            title: '消息通知',
                                            message: res.message
                                        });
                                    else {
                                        layer.close(editDialog);
                                        iziToast.success({
                                            title: '消息通知',
                                            message: res.message
                                        });
                                        _this.ReloadSystemNotice();
                                    }
                                }).catch(error => console.error(error));
                                return false;
                            });
                        }
                    }
                } //End of methods
            }); // End of Vue

            var connection = new signalR.HubConnectionBuilder().withUrl("/notify-hub").build();
            //Disable send button until connection is established
            var addNoticeButton = document.getElementById("addNewNotice");
            if (addNoticeButton !== null) {
                addNoticeButton.disabled = true;
            }
            connection.start().then(function () {
                if (addNoticeButton !== null)
                    addNoticeButton.disabled = false;
                connectionId = connection.connectionId;
            }).catch(function (err) {
                return console.error(err.toString());
            });
            connection.on("onNewNoticeAdd", function (message) {
                notice.success(message);
                vm.ReloadSystemNotice();
            });
            //所有博客文章近7天统计量
            var blogVisitChart = echarts.init(document.getElementById('echart_blogsvisit'));
            var dayArray = @Html.Raw(Json.Serialize(sevendayCount.Keys.ToArray()));
            var countArray = @Html.Raw(Json.Serialize(sevendayCount.Values.ToArray()));
            option = {
                xAxis: {
                    type: 'category',
                    data: dayArray
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: countArray,
                    type: 'line'
                }]
            };
            blogVisitChart.setOption(option);
            blogVisitChart.resize();
        });
    </script>
}